<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <div ref="container">
      <a-divider orientation="left"> 排序 </a-divider>
      <a-form-model-item class="">
        <div class="drag-div">
          <div
            class="flex align-center margin-left drag-btn"
            v-for="(item, index) in option"
            :key="item.key"
          >
            <span style="cursor: move"><a-icon type="drag" /></span>
            <div class="flexRow flex align-center margin-left">
              <a-space>
                <div class="Width250">
                  <a-select
                    style="width: 200px"
                    v-model="item.key"
                    placeholder="请选择字段"
                  >
                    <a-select-option
                      v-for="sitem in field.filter(
                        (f) => option.indexOf((ind) => ind.key == f.key) == -1
                      )"
                      :key="sitem.key"
                      :value="sitem.key"
                      >{{ sitem.label }}</a-select-option
                    >
                  </a-select>
                </div>
                <div class="Width250">
                  <a-select style="width: 200px" v-model="item.sord">
                    <a-select-option value="desc">降序</a-select-option>
                    <a-select-option value="asc">升序</a-select-option>
                  </a-select>
                </div>
                <a-icon type="minus-circle" @click="del(index)" />
                <a-icon type="plus-circle" @click="add" />
              </a-space>
            </div>
          </div>
        </div>
      </a-form-model-item>
    </div>
  </a-form-model>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      blockSyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
    };
  },
  props: {
    option: {
      type: Array,
    },
    field: {
      type: Array,
    },
  },

  created() {
    this.rowDrop();
  },
  methods: {
    /**
     * 删除
     */
    del(index) {
      if (this.option.length == 1) {
        this.$message.error("至少保留一个排序字段");
      } else {
        this.option.splice(index, 1);
      }
    },

    /**
     * 新增
     */
    add() {
      for (let index = 0; index < this.field.length; index++) {
        const element = this.field[index];
        var find = this.$utils.find(this.option, (f) => f.key == element.key);
        if (!find) {
          this.option.push({
            key: element.key,
            type: element.type,
            sord: "desc",
          });
          break;
        }
      }
      this.rowDrop();
    },

    /**
     * 拖拽
     */
    rowDrop() {
      let that = this;
      this.$nextTick(() => {
        setTimeout(function () {
          const container = that.$refs.container;
          if (container) {
            Sortable.create(container.querySelector(".drag-div"), {
              handle: ".drag-btn",
              onEnd: ({ newIndex, oldIndex }) => {
                const currRow = that.option[oldIndex];
                that.option.splice(oldIndex, 1);
                that.option.splice(newIndex, 0, currRow);
              },
            });
          }
        }, 100);
      });
    },
  },
};
</script>
<style scoped></style>
